<template>
  <div class="todolist__container">
    <div class="todolist__header">{{ title }}</div>

    <div>
      <el-input
        class="todolist__new-input"
        type="text"
        placeholder="请输入一个新的 todo 项目..."
        clearable
        v-model="Todo_new_content"
        @change="submit_Todo"
      ></el-input>
    </div>

    <div class="todolist__child-holder">
      <TodoLine
        v-for="item in Todo_data._todolist"
        :key="item.id"
        :contentObj="item"
        @delete_single_todo="delete_Todo"
      ></TodoLine>
    </div>
    <div class="todolist__footer"></div>
  </div>
</template>

<script>
import TodoLine from "./TodoList_Line.vue";

// Todo_data 格式:
// Todo_data : {
//   _todoID: 0,
//   _todolist: [
//     {
//       id: 0,
//       content: "todo 内容",
//       stat: "normal | done | delete"
//     }
//   ],
// }

export default {
  components: { TodoLine },
  data() {
    return {
      title: "TODO LIST",

      Todo_new_id: 0,
      Todo_new_content: "",

      Todo_data: {
        _todoID: 0,
        _todolist: [],
      },
    };
  },
  methods: {
    /**
     * 提交新 todo
     */
    submit_Todo() {
      this.Todo_data._todolist.push({
        id: this.Todo_new_id,
        content: this.Todo_new_content,
        stat: "normal",
      });
      this.Todo_new_id++;
      this.Todo_data._todoID = this.Todo_new_id;
      this.Todo_new_content = "";

      return;
    },
    /**
     * 删除 todo
     */
    delete_Todo(value) {
      console.log("on delete _id:\t", value);
      this.Todo_data._todolist = this.Todo_data._todolist.filter(
        (ele) => ele.id != value
      );
    },

    /**
     * 向 数据库(localStorage) 更新 
     */
    databaseUpdate__Todo() {
      localStorage.setItem("_todolist_", JSON.stringify(this.Todo_data));
    },
    /** 
     * 防抖
    */
    _debounce(func, wait) {
      let timeout = '';
      return (v) => {
        if (timeout) {
          clearTimeout(timeout);
        }
        timeout = setTimeout(() => {
          func(v);
        }, wait);
      }
    }
  },
  created() {
    let data_local = JSON.parse(localStorage.getItem("_todolist_"));
    if (data_local) {
      // console.log(data_local);
      if (data_local != null) {
        this.Todo_data = data_local;
        this.Todo_new_id = Number(this.Todo_data._todoID);
      }
    }
  },

  updated() {
    // localStorage.setItem("_todolist_", JSON.stringify(this.Todo_data));
  },


  watch: {
    Todo_data: {
      // NOTE: 注意 handler 不能是箭头函数, 会丢失作用域, this会指向奇怪的东西
      handler: function (newV, oldV) {
        // TODO: 问老师这里要是想搞成 _debounce 防抖 该怎么搞:
        // NOTE: 笑死, 老师根本没有在子组件写逻辑, 都写在了父组件, 不用 _debounce
        // this._debounce(this.databaseUpdate__Todo, 500)
        this.databaseUpdate__Todo()

      },

      deep: true
    }
  }
};
</script>

<style lang="scss" scoped>
.todolist {
  &__container {
    margin: 0 auto;
    max-width: 800px;
    height: auto;

    background-color: #eee;

    border: 1px solid cyan;

    display: flex;
    flex-direction: column;
    align-items: center;
  }
  &__header {
    margin: 10px;

    font-size: 20px;
  }
  &__new-input {
    width: 400px;

    border-radius: 0px;

    background-color: #ddd;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }
  &__child-holder {
    width: 400px;

    margin-top: 1px;
    margin-bottom: 40px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }
}
</style>

